<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { useBooleanStore } from '@/store';
  import { Notification } from '@arco-design/web-vue';
  import { updateConsole } from '@/api/system-basic';

  const form = ref({
    CONSOLEID: '',
    CONSOLENAME: '',
    CONSOLEIP: '',
    CONSOLETYPE: '',
    CONSOLESTATUS: '',
    CONSOLECALLBYWORKBIN: '',
    CONSOLEWORKBINMAXQUANTITY: '',
    CONSOLECALLBYTOOL: '',
    CONSOLETOOLMAXQUANTITY: '',
  });
  const showDrawer = ref<boolean>(false);
  const booleanStore = useBooleanStore();

  // 监听弹框
  watch(
    () => booleanStore.boolValue2,
    (newValue: boolean) => {
      if (booleanStore.num2 === 17) showDrawer.value = newValue;
    }
  );
  watch(
    () => booleanStore.row,
    () => {
      if (booleanStore.num2 === 17) {
        form.value = {
          CONSOLEID: booleanStore.row.CONSOLEID,
          CONSOLENAME: booleanStore.row.CONSOLENAME,
          CONSOLEIP: booleanStore.row.CONSOLEIP,
          CONSOLETYPE: booleanStore.row.CONSOLETYPE,
          CONSOLESTATUS: (booleanStore.row.CONSOLESTATUS = '工作' ? '1' : '2'),
          CONSOLECALLBYWORKBIN: booleanStore.row.CONSOLECALLBYWORKBIN,
          CONSOLEWORKBINMAXQUANTITY: booleanStore.row.CONSOLEWORKBINMAXQUANTITY,
          CONSOLECALLBYTOOL: booleanStore.row.CONSOLECALLBYTOOL,
          CONSOLETOOLMAXQUANTITY: booleanStore.row.CONSOLETOOLMAXQUANTITY,
        };
      }
    }
  );

  function afterVisibleChange(val: any) {
    if (!val) {
      booleanStore.toggleBool2(17);
    }
  }
  function handleCancel() {
    booleanStore.toggleBool2(17);
  }

  const formRef = ref<any>('');

  const rules = {
    CONSOLENAME: [
      { required: true, message: '不能为空' },
      {
        validator: (value: any, cb: any) => {
          if (value && value.length > 30) {
            cb('不能超过 30位字符');
          } else {
            cb();
          }
        },
      },
    ],
    CONSOLEIP: [
      { required: true, message: '不能为空' },
      {
        validator: (value: any, cb: any) => {
          if (value && value.length > 30) {
            cb('不能超过 30位字符');
          } else {
            cb();
          }
        },
      },
    ],
    CONSOLETYPE: [
      { required: true, message: '不能为空' },
      {
        validator: (value: any, cb: any) => {
          if (value && value.length > 30) {
            cb('不能超过 30位字符');
          } else {
            cb();
          }
        },
      },
    ],
    CONSOLESTATUS: [
      { required: true, message: '不能为空' },
      {
        validator: (value: any, cb: any) => {
          if (value && value.length > 30) {
            cb('不能超过 30位字符');
          } else {
            cb();
          }
        },
      },
    ],
  };

  async function handleOk(done: any) {
    const res = await formRef.value.validate();
    if (res) {
      done(false);
    } else {
      const data = await updateConsole(form.value);

      if (data.retCode === '200') {
        Notification.success({
          title: '成功',
          content: data.message,
          closable: true,
        });

        booleanStore.toggleBool2(17);
      } else {
        Notification.error({
          title: '失败',
          content: data.message,
          closable: true,
        });
        booleanStore.toggleBool2(17);
      }
      booleanStore.watchUpdate(21);
      done();
    }
  }
</script>

<template>
  <a-drawer
    :width="500"
    :height="340"
    :visible="showDrawer"
    placement="right"
    @after-visible-change="afterVisibleChange"
    @cancel="handleCancel"
    @ok="handleOk"
  >
    <template #title> 修改操作台</template>
    <div>
      <a-form
        ref="formRef"
        :model="form"
        :rules="rules"
        :style="{ width: '450px' }"
      >
        <a-form-item field="CONSOLENAME" label="名称:">
          <a-input v-model="form.CONSOLENAME" placeholder="操作台名称" />
        </a-form-item>
        <a-form-item field="CONSOLEIP" label="IP:">
          <a-input v-model="form.CONSOLEIP" placeholder="操作台IP地址" />
        </a-form-item>
        <a-form-item field="CONSOLETYPE" label="类型:">
          <a-select v-model="form.CONSOLETYPE" placeholder="操作台类型">
            <a-option value="1">接收台</a-option>
            <a-option value="2">分拣台</a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="CONSOLESTATUS" label="状态:">
          <a-select v-model="form.CONSOLESTATUS" placeholder="操作台状态">
            <a-option value="1">工作</a-option>
            <a-option value="2">停用</a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="CONSOLECALLBYWORKBIN" label="位置:">
          <a-input
            v-model="form.CONSOLECALLBYWORKBIN"
            placeholder="叫缓存箱位置"
          />
        </a-form-item>
        <a-form-item field="CONSOLEWORKBINMAXQUANTITY" label="操作数:">
          <a-input
            v-model="form.CONSOLEWORKBINMAXQUANTITY"
            placeholder="缓存箱最大操作数"
          />
        </a-form-item>

        <a-form-item field="CONSOLECALLBYTOOL" label="器具包:">
          <a-input
            v-model="form.CONSOLECALLBYTOOL"
            :disabled="!form.CONSOLETYPE || form.CONSOLETYPE !== '2'"
            placeholder="叫工具器具包位置"
          />
        </a-form-item>
        <a-form-item field="CONSOLETOOLMAXQUANTITY" label="包数:">
          <a-input
            v-model="form.CONSOLETOOLMAXQUANTITY"
            :disabled="!form.CONSOLETYPE || form.CONSOLETYPE !== '2'"
            placeholder="最大工作器具包数"
          />
        </a-form-item>
      </a-form>
    </div>
  </a-drawer>
</template>

<style scoped>
  .add {
    background-color: #bacf65;
    color: #fff;
  }
  .clear {
    margin-left: 10px;
  }
</style>
